<template>
	<view>
		<view class="topimgw">
			<image :src="recipeInfo.header_img" class="headerimg"></image>
		</view>
		<view class="recipe_ingredient" style="margin-top: -64px;">
			<h1>{{recipeInfo.title}}</h1>
			<u-line color="#f5f5f5" />
			<view style="">
				{{recipeInfo.desc}}
			</view>
			<view style="margin-top: 40rpx;">
				<view class="recipe_ingredient_main_t">
					主料<text>2人份</text>
				</view>
				<view class="recipe_ingredient_main_ul">
					<view class="recipe_ingredient_main_li" v-if="item.type=='main'"
						v-for="(item, index) in recipeIngredients" :key="index">
						<text>
							<text class="t">{{item.name}}</text>
							<text class="a">{{item.measurement}}</text>
						</text>
					</view>
				</view>
			</view>

			<view style="margin-top: 40rpx;">
				<view class="recipe_ingredient_main_t">
					辅料
				</view>
				<view class="recipe_ingredient_main_ul">
					<view class="recipe_ingredient_main_li" v-if="item.type=='auxiliary'"
						v-for="(item, index) in recipeIngredients" :key="index">
						<text>
							<text class="t">{{item.name}}</text>
							<text class="a">{{item.measurement}}</text>
						</text>
					</view>
				</view>
			</view>
		</view>

		<view class="recipe_step" style="min-height: 1600px;">
			<view :class="['recipe_step_item',isEmpty(item.step_img)?'recipe_step_item_no_img':'']" v-for="(item, index) in recipeSteps" :key="index">
				<text class="recipe_step_title">{{item.step_title}}</text>
				<image class="recipe_step_img" :src="item.step_img" v-if="!isEmpty(item.step_img)">
				</image>
				<view class="recipe_step_des" v-if="!isEmpty(item.step_des)">
					<text class="recipe_step_des_text">
						{{item.step_des}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recipe_code: '',
				recipeInfo: '',
				recipeIngredients: [],
				recipeSteps: [],
			}
		},
		onLoad(option) {
			this.recipe_code = option.recipe_code;
			console.log(this.recipe_code)
			//#ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			//#endif
			this.queryRecipeInfo();
			this.queryRecipeDetail();
		},
		onReady() {
			
		},
		methods: {
			queryRecipeInfo(){
				uni.showLoading({title: '加载中'});
				uniCloud.callFunction({
						name: 'recipe',
						data: {
							action: 'queryRecipeInfo',
							recipe_code: this.recipe_code
						}
					})
					.then(res => {
						uni.hideLoading();
						console.log(res);
						if (res.success) {
							this.recipeInfo = res.result.recipeInfo[0];
						} else {
				
						}
					});
			},
			queryRecipeDetail() {
				uni.showLoading({title: '加载中'});
				uniCloud.callFunction({
						name: 'recipe',
						data: {
							action: 'queryRecipeDetail',
							recipe_code: this.recipe_code
						}
					})
					.then(res => {
						uni.hideLoading();
						console.log(res);
						if (res.success) {
							this.recipeIngredients = res.result.recipeIngredients;
							this.recipeSteps = res.result.recipeSteps;
						} else {

						}
					});
			},
			isEmpty(obj) {
				if (typeof obj == "undefined" || obj == null || obj == "") {
					return true;
				} else {
					return false;
				}
			}
		}
	}
</script>

<style>
	.topimgw {
		width: 100%;
		padding-top: 100%;
		position: relative;
		overflow: hidden;
		background: #333;
	}

	.headerimg {
		display: block;
		width: 100%;
		min-height: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
	}

	.recipe_ingredient {
		padding: 20px 15px 10px;
		margin: 16px;
		background: #fff;
		border-radius: 16px;
		box-shadow: 0px 0px 32px rgb(0 0 0 / 10%);
		position: relative;
		z-index: 1000;
	}

	.recipe_ingredient h1 {
		font-size: 28px;
		font-weight: 700;
		color: #333;
		line-height: 38px;
	}

	.recipe_ingredient_main_t {
		height: 40px;
		background: #fff;
		line-height: 40px;
		margin: 0px 0px;
		font-size: 16px;
		color: #333;
		font-weight: 700;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}

	.recipe_ingredient_main_t text {
		color: #999;
		font-size: 12px;
		padding-left: 6px;
		font-weight: 300;
	}

	.recipe_ingredient_main_ul {
		padding: 0px 0px 0px;
		margin-bottom: 16px;
		height: auto;
		font-size: 0px;
	}

	.recipe_ingredient_main_ul .recipe_ingredient_main_li {
		height: 36px;
		line-height: 36px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		width: 50%;
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
	}

	.recipe_ingredient_main_ul .recipe_ingredient_main_li:nth-child(2n+1) {
		border-right: 1px solid #eee;
	}

	.recipe_ingredient_main_ul .recipe_ingredient_main_li .t {
		display: inline-block;
		vertical-align: top;
		width: 52%;
		padding-right: 15px;
		box-sizing: border-box;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		font-size: 14px;
		color: #108ee9;
		font-weight: 400;
	}

	.recipe_ingredient_main_ul .recipe_ingredient_main_li:nth-child(2n+2) .t {
		padding-left: 5px;
	}

	.recipe_ingredient_main_ul .recipe_ingredient_main_li .a {
		display: inline-block;
		vertical-align: top;
		width: 48%;
		padding-right: 0px;
		box-sizing: border-box;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		font-size: 14px;
		color: #666;
		font-weight: 400;
		text-align: right;
		padding-right: 20px;
		box-sizing: border-box;
	}

	.recipe_step {
		width: auto;
		background: #fff;
		padding: 1px 15px 15px;
		overflow: hidden;
		position: relative;
	}

	.recipe_step .recipe_step_item {
		position: relative;
		width: 100%;
	}

	.recipe_step_title {
		height: 40px;
		line-height: 40px;
		color: #333;
		font-size: 18px;
		font-weight: 700;
		display: inline-block;
		vertical-align: top;
		padding: 0px 20px 0px 15px;
		background: rgba(255, 255, 255, 0.9);
		position: absolute;
		left: 0px;
		top: 15px;
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
		z-index: 100;
	}

	.recipe_step_img {
		display: block;
		width: 100%;
	}

	.recipe_step_des {
		padding: 15px 0px 15px;
	}

	.recipe_step_des_text {
		font-size: 16px;
		line-height: 24px;
		color: #666;
		font-weight: 400;
		text-align: justify;
		display: block;
		word-break: break-all;
	}
	
	.recipe_step_item_no_img .recipe_step_title{
		padding-left: 0px;
	}
	
	.recipe_step_item_no_img .recipe_step_des{
		padding-top: 60px;
	}
</style>
